<template>
	<view><uni-nav-bar :statusBar="true" @clickRight="openAdd" :fixed="true" :border="false">
			<!-- 左边 -->
			<template slot="left">
				<view class="nav-left">
					<view class="icon iconfont icon-qiandao"></view>
				</view>
			</template>
			<!-- 中间 -->
			<view class="nav-tab-bar m-f-jcc">
				<template v-for="(item, index) in tabBars">
					<view class="m-f-jcc" :class="{'active':tabIndex==index}" @tap="changeTab(index)" :key="index">
						{{item.name}}
						<view v-if="tabIndex==index" class="nav-tab-bar-line"></view>
					</view>
				</template>
			</view>
			<!-- 右边 -->
			<template slot="right">
				<view class="nav-right m-f">
					<view class="icon iconfont icon-bianji"></view>
				</view>
			</template>
		</uni-nav-bar>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		props: {
			tabBars: {
				type: Array
			},
			tabIndex: {
				type: Number
			}
		},
		components: {
			uniNavBar,
		},
		methods: {
			changeTab(index) { // 改变tab栏状态
				this.$emit('change-tab', index)
			},
			openAdd() { // 打开发布页面
				uni.navigateTo({
					url: '../add-input/add-input'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.nav-left, .nav-right {
	.iconfont {
		font-size: 44rpx;
	}
}
.nav-left {
	color: #FF9619;
}
.nav-right {
	align-items: flex-end;
	margin-left: 80rpx;
}
.nav-tab-bar {
	width: 100%;
	margin-left: -15rpx;
	.m-f-jcc {
		font-size: 30rpx;
		padding: 0 15rpx;
		font-weight: bold;
		color: #969696;
	}
	.active {
		color: #333333 !important;
	}
	.nav-tab-bar-line {
		border-bottom: 5rpx solid #FEDE33;
		border-top: 5rpx solid #FEDE33;
		width: 70rpx;
		border-radius: 20rpx;
		position: absolute;
		bottom: 12rpx;
	}
}
</style>
